<template>
    <div class="app-container">
        <!-- 搜索栏 -->
        <!-- 使用 Element Plus 的表单组件，绑定数据模型 queryParams，引用名为 queryRef，采用 inline 布局 -->
        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="分类">
                <!-- 级联选择器，用于选择分类 -->
                <!-- 绑定的属性 categoryProps，数据模型为 queryCategoryIdList，分类变化时触发事件 handleCategoryChange -->
                <el-cascader :props="categoryProps" v-model="queryCategoryIdList" @change="handleCategoryChange"
                    style="width: 100%" />
            </el-form-item>

            <el-form-item label="品牌">
                <!-- select 选择器，用于选择品牌 -->
                <!-- 数据模型为 queryParams.brandId，使用 v-for 循环渲染 options -->
                <el-select class="m-2" v-model="queryParams.brandId" placeholder="选择品牌" size="small"
                    style="width: 100%">
                    <!-- brandList 中的每个 item 生成一个选项，采用 item.id 作为选项的 key 和值，item.name 作为标签 -->
                    <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <!-- 搜索按钮，点击后执行 handleQuery 函数 -->
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <!-- 重置按钮，点击后执行 resetQuery 函数 -->
                <el-button icon="Refresh" id="reset-all" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 功能按钮栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- 新增按钮 -->
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 修改按钮 -->
                <el-button type="success" plain icon="Edit" :disabled="noSingle" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <!-- 删除按钮 -->
                <el-button type="danger" plain icon="Delete" :disabled="noSelect" @click="handleDelete">删除</el-button>
            </el-col>
            <!-- 右侧工具栏组件 -->
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 数据展示表格 -->
        <!-- Element Plus 的表格组件，支持加载动画 -->
        <el-table v-loading="loading" :data="categoryBrandList" @selection-change="handleSelectionChange">
            <!-- 列选择器 -->
            <el-table-column type="selection" width="55" align="center" />
            <!-- 分类名称列 -->
            <el-table-column label="分类名称" prop="categoryName" />
            <!-- 品牌名称列 -->
            <el-table-column label="品牌名称" prop="brandName" />
            <!-- 品牌图标列 -->
            <el-table-column prop="logo" label="品牌图标" #default="scope">
                <!-- 使用插槽机制，动态加载图片 -->
                <img :src="scope.row.logo" width="50" />
            </el-table-column>
            <!-- 创建时间列 -->
            <el-table-column prop="createTime" label="创建时间" />
            <!-- 操作列，包含修改和删除操作 -->
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <!-- 修改按钮 -->
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <!-- 删除按钮 -->
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 添加或修改分类品牌对话框 -->
        <el-dialog :title="title" v-model="open" :rules="rules" width="500px" append-to-body>
            <el-form ref="categoryBrandRef" :model="form" label-width="80px">
                <el-form-item label="分类" prop="categoryIdList">
                    <el-cascader :props="categoryProps" v-model="form.categoryIdList" />
                </el-form-item>
                <el-form-item label="品牌" prop="brandId">
                    <el-select v-model="form.brandId" class="m-2" placeholder="选择品牌" size="small">
                        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>


        <!-- 分页条组件 -->
        <!-- 只有当 total 大于 0 时才显示，绑定总数和当前页码与每页显示数量 -->
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize" @pagination="getList" />



    </div>
</template>

<script setup name="CategoryBrand">
import { listCategoryBrand, getBrandAll, addCategoryBrand, getCategoryBrand, updateCategoryBrand, delCategoryBrand } from "@/api/product/categoryBrand";
import { getTreeSelect } from "@/api/product/category";
// import { onMounted } from "vue";
// =================================================const==============================================================================================
//定义批量操作id列表模型
const ids = ref([]);
//定义单选控制模型
const noSingle = ref(true);
//定义多选控制模型
const noSelect = ref(true);
//新增与修改弹出层控制模型
const open = ref(false);
//新增与修改弹出层标题模型
const title = ref("");
// 获取当前实例对象
const { proxy } = getCurrentInstance();
// 定义隐藏搜索控制模型
const showSearch = ref(true);
// 定义搜索表单数据模型
const brandList = ref([]);
// 配置级联选择器属性
const props = {
    lazy: true, // 开启懒加载
    value: 'id', // 用于作为选项的值的属性名
    label: 'name', // 用于显示选项标签的属性名
    leaf: 'leaf', // 用于指示节点是否为叶子节点的属性名
    async lazyLoad(node, resolve) {   // 加载数据的方法
        const { level } = node;
        if (typeof node.value == 'undefined') node.value = 0;
        const { code, data, message } = await getTreeSelect(node.value);
        //hasChildren 判断是否有子节点
        data.forEach(function (item) {
            item.leaf = !item.hasChildren;
        });
        resolve(data);  // 返回数据
    }
};
const categoryProps = ref(props);
// 定义级联选择器数据模型
const queryCategoryIdList = ref([]);
// 定义表格数据模型
const categoryBrandList = ref([]);
// 分页条数据模型
const total = ref(0);
// 加载数据时显示的动效控制模型
const loading = ref(true);
// 通过 reactive 创建的对象是响应式的，意味着当对象的属性发生变化时，依赖这些属性的组件会自动更新
const data = reactive({
    // 定义搜索模型
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandId: null,
        categoryId: null
    },
    form: {
        id: null,
        brandId: null,
        categoryId: null,
        categoryIdList: []
    },
    rules: {
        categoryIdList: [
            { required: true, message: "分类不能为空", trigger: "blur" }
        ],
        brandId: [
            { required: true, message: "品牌不能为空", trigger: "blur" }
        ]
    }
});
// 使用 toRefs 可以将响应式对象中的属性转换为单独的 ref 对象，这样可以在模板中更方便地使用这些属性
const { queryParams, form, rules } = toRefs(data);

// =================================================function==============================================================================================
// 查询分类品牌列表
function getList() {
    loading.value = true; // 开始加载，显示动效
    listCategoryBrand(queryParams.value).then(response => {
        categoryBrandList.value = response.rows; // 赋值表格数据
        total.value = response.total; // 赋值总数
        loading.value = false; // 结束加载，隐藏动效
    });
}
// 获取全部品牌列表
function getBrandAllList() {
    getBrandAll().then(response => {
        brandList.value = response.data; // 更新品牌列表
    });
}
// async写法
// async function getBrandAllList() {
//     try {
//         const response = await getBrandAll();
//         brandList.value = response.data;
//     } catch (error) {
//         console.error('Error fetching brand list:', error);
//     }
// }

// 分类列表变化时触发
const handleCategoryChange = () => {
    if (queryCategoryIdList.value.length == 3) {
        queryParams.value.categoryId = queryCategoryIdList.value[2]; // 更新分类 ID
    }
}
// 搜索按钮操作
function handleQuery() {
    // queryParams.value.pageNum = 1;
    getList(); // 获取列表数据
}
// 重置按钮操作
function resetQuery() {
    queryCategoryIdList.value = []; // 重置分类选择器
    queryParams.value.categoryId = null; // 重置分类 ID
    queryParams.value.brandId = null; // 重置品牌 ID
    proxy.resetForm("queryRef"); // 重置搜索表单数据
    handleQuery(); // 重新查询
}

// 新增按钮操作
function handleAdd() {
    reset();
    title.value = "添加分类品牌";
    open.value = true;
}
// 表单重置
function reset() {
    form.value = {
        id: null,
        brandId: null,
        categoryId: null,
        categoryIdList: []
    };
    proxy.resetForm("categoryBrandRef");
}

// 表单提交按钮
function submitForm() {
    proxy.$refs["categoryBrandRef"].validate(valid => {
        debugger
        if (valid) {
            //系统只需要三级分类id
            if (form.value.categoryIdList.length == 3) {
                form.value.categoryId = form.value.categoryIdList[2]
            }


            if (form.value.id != null) {
                updateCategoryBrand(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addCategoryBrand(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    debugger
    ids.value = selection.map(item => item.id);
    noSingle.value = selection.length != 1;
    noSelect.value = !selection.length;
}
// 修改按钮操作 
function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value
    getCategoryBrand(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改分类品牌";
    });
}
// 删除按钮操作
function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal.confirm('是否确认删除分类品牌编号为"' + _ids + '"的数据项？').then(function () {
        return delCategoryBrand(_ids);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
// 进入页面时获取数据列表
// onMounted(() => {
//     getList();
// });
getList(); // 初始加载列表数据
getBrandAllList(); // 初始获取品牌列表
</script>